<template>
	<view class="hearing-wrap">
		<u-navbar
			backIconColor="#FFFFFF"
			:background="{background: 'linear-gradient(90deg,#615CED,#8286F2)'}"
			:border-bottom="false"
			title="考官评价"
			titleColor="#FFFFFF"
			height="88">
		</u-navbar>

		<video class="ksvideo" v-if="videoUrl" :src="videoUrl" enable-play-gesture="true"></video>

		<scroll-view id="scrollView" :scroll-y="true" style="width: 100%;margin-top: 420rpx;" :style="{height: svHeight}">
			<view class="pjwrap">
				<!-- question_type：考题类型：1：简答题  2：选择题 file_type：题目文件类型1：音频  2：图片 0：无 3：音频+图片 -->
				<view v-for="(item,index) in lists" :key="index" style="background-color: #FFFFFF;" :style="{paddingTop: index==0?'20rpx':'0'}">
					<view class="pjitem">
						<image class="arrow" :src="'../../static/ic_arrow_'+(item.open?'down':'right')+'_big.png'" @click="item.open=!item.open"></image>
						<view class="dafen" @click="item.open=!item.open">{{item.subject?item.subject:''}}{{item.fraction?`（${item.fraction}分）`:''}}</view>

						<picker :disabled="!item.open||(item.question_type==2&&item.answer!=item.option)" mode="selector" :range="item.range" :id="index" :value="item.pickIndex" @change="pickChange">
							<view class="pickerwrap">
								<p> {{((item.question_type==1)||(item.question_type==2&&item.answer==item.option))?item.range[item.pickIndex]:0}}</p>
								<image v-if="item.open&&((item.question_type==1)||(item.question_type==2&&item.answer==item.option))" src="../../static/ic_arrow_down.png" mode="scaleToFill"></image>
							</view>
						</picker>
					</view>

					<view class="answer">
						<view class="stuans" v-if="item.question_type==2" @click="item.open=!item.open">学生答案({{item.answer?item.answer:''}})</view>
						<view v-if="item.question_type==2" class="panduan" :style="{color: item.answer==item.option?'#01A44B':'#FF0000'}" @click="item.open=!item.open">
							{{item.answer==item.option?'正确':'错误'}}
						</view>
					</view>

					<image class="pdpic" v-if="item.image && item.open && (item.file_tye ==2 || item.file_type == 3)" :src="baseUrl + item.image" mode="widthFix"></image>

					<audio v-if="item.audio && item.open && (item.file_type == 1 || item.file_type == 3)" style="margin-left: 90rpx;" :src="baseUrl + item.audio" name="播放题干音频" controls></audio>

					<view v-if="item.open && (item.question_type == 1)" style="padding: 0 90rpx;">
						<rich-text :nodes="$html.replaceImgSrc('答案：' + item.option,baseUrl)"></rich-text>
					</view>

					<view v-if="item.open && (item.question_type == 2)">
						<view v-for="(ops,idxo) in item.choice" :key="idxo">
							<view class="choiceitem">
								<image :src="'../../static/ic_checked'+(ops.choice==item.answer?'_hl':'')+'.png'" mode="scaleToFill"></image>
								<view class="itemtxt">
									<view> {{ops.choice?`${ops.choice}.`:''}}</view>
									<rich-text style="margin: 0 30rpx 0 15rpx;" :nodes="$html.replaceImgSrc(ops.option_questions,baseUrl)"></rich-text>
								</view>
							</view>
						</view>

						<view style="padding: 0 90rpx;">
							答案：{{item.option}}
						</view>
					</view>
				</view>

				<view class="fstitle">
					<view class="shuxian"></view>
					<p>总分数：{{totalScore}}分</p>
				</view>

				<view class="pytitle">
					<view class="shuxian"></view>
					<p>考官评语</p>
				</view>

				<view v-if="commentSort==1" class="pyneirong">
					<view class="nrleft">
						<textarea class="textarea1"
							v-model="comments"
							@input="onInput"
							placeholder-style="color: #999999;font-size: 22rpx;"
							placeholder="请输入评语~">
						</textarea>
					</view>
					<view class="nrright">
						<scroll-view :scroll-x="true" style="white-space: nowrap;">
							<view class="tablist">
								<view class="tabitem" v-for="(tab,idxt) in commentTab" :key="idxt" @click="commentTabIndex(tab,idxt)">
									<p :style="{color: commentTabIdx==idxt?'#333333':'#666666'}">
										{{tab.category}}
									</p>
									<view class="xiahuaxian" :style="{opacity: commentTabIdx==idxt?1:0}"></view>
								</view>
							</view>
						</scroll-view>
						<scroll-view :scroll-y="true" style="height: 260rpx;margin-top: 5rpx;">
							<view class="tabcontent" v-for="(comm,idxc) in commentTab[commentTabIdx]?commentTab[commentTabIdx].content:[]" :key="idxc" @click="commCheck(comm,idxc)"> {{comm.content}}</view>
						</scroll-view>
					</view>
				</view>

				<view v-else class="pyneirong1">
					<view class="pysrk">
						<textarea
							class="textarea1"
							v-model="comments"
							@input="onInput"
							placeholder-style="color: #999999;font-size: 22rpx;"
							placeholder="请输入评语~">
						</textarea>
					</view>
				</view>

				<view class="zztitle">
					<view class="xiahuaxian"></view>
					<p>最终评定</p>
				</view>

				<view class="pdpic1">
					<image v-for="(item,idxn) in [1,2,3,4,5]" :key="idxn" :src="'../../static/ic_evaluate_' + item+ (idxn == evaluateIdx ? '_hl' : '')+'.png'" mode="widthFix" @click="evaluate(item,idxn)"></image>
				</view>

				<view class="tjbtn" @click="signature">提交成绩</view>
				<view style="height: 50rpx;"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '',
			baseUrl: this.$api.baseUrl,
			svHeight: 0,
			videoUrl: '',
			lists: [],
			Timeout: 3000,
			TimeoutId: '',
			comments: '',
			signType: 0,
			totalScore: 0,
			commentSort: 0,
			commentTabIdx: 0,
			commentTab: [],
			evaluateIdx: -1
		}
	},
	onReady() {
		let ctx = this;
		uni.getSystemInfo({
			success(res) {
				uni.createSelectorQuery().select('#scrollView').boundingClientRect(data => {ctx.svHeight = res.windowHeight - data.top + 'px'}).exec()
			}
		});
	},
	onLoad(ops) {
		this.id = ops?.id || '';
	},
	onShow() {
		this.getAssess();
	},
	methods: {
		pickChange(e) {
			this.lists[e?.target?.id].pickIndex = e?.detail?.value;
			let body = {
				type: 1,
				id: this.lists[e?.target?.id].id,
				content: this.lists[e?.target?.id]?.range[e?.detail?.value]
			};
			this.modifyScore(body, () => this.getAssess(true));
		},
		onInput(e) {
			clearTimeout(this.TimeoutId);
			this.TimeoutId = setTimeout(() => {
				if (e?.detail?.value) {
					let body = {
						type: 2,
						id: this.id,
						content: e?.detail?.value
					};
					this.modifyScore(body);
				}
			}, this.Timeout)
		},
		commentTabIndex(tab, idxt) {
			this.commentTabIdx = idxt;
		},
		commCheck(comm, idxc) {
			this.comments = this.comments + comm.content;
			let body = {
				type: 2,
				id: this.id,
				content: this.comments
			}
			this.modifyScore(body);
		},
		evaluate(item, idxn) {
			if (this.evaluateIdx != idxn) {
				this.evaluateIdx = idxn;
				let body = {
					type: 5,
					id: this.id,
					content: item
				};
				this.modifyScore(body);
			}
		},
		signature() {
			if (!this.comments) {
				uni.showToast({
					title: '请输入评语~',
					icon: 'none'
				})
				return
			}

			if (this.signType == 1) {
				this.sign();
			} else {
				uni.navigateTo({
					url: `signConfirm?id=${this.id}`
				});
			}
		},
		sign() {
			let that = this;
			const systemInfo = uni.getSystemInfoSync();
			uni.request({
				url: `${that.$api.baseUrl}${that.$api.sign}`,
				method: 'POST',
				timeout: 30000,
				data: {
					id: that.id,
					device_id: systemInfo.deviceId
				},
				header: {
					'authtoken': that.$auth.token(that.$api.sign)
				},
				success(res) {
					if (res.data?.code == 1) {
						uni.$emit('sign', that.id);
						uni.showToast({
							title: res.data?.msg || '签字确认完成',
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 2
							})
						}, 1000);
					} else {
						uni.showToast({
							title: res.data?.msg || '签字确认失败',
							icon: 'none'
						});
					}
				},
				fail(err) {
					uni.showToast({
						title: '签字确认失败',
						icon: 'none'
					});
				}
			})
		},
		modifyScore(body, callback) {
			let that = this;
			uni.request({
				url: `${that.$api.baseUrl}${that.$api.modifyScore}`,
				method: 'POST',
				timeout: 30000,
				data: body,
				header: {
					'authtoken': that.$auth.token(that.$api.modifyScore)
				},
				success(res) {
					if (res.data?.code == 1) {
						if (callback) callback();
					} else {
						uni.showToast({
							title: res.data?.msg || '评审失败',
							icon: 'none'
						});
					}
				},
				fail(err) {
					uni.showToast({
						title: '评审失败',
						icon: 'none'
					});
				}
			})
		},
		getAssess(score) {
			let that = this
			const systemInfo = uni.getSystemInfoSync()
			uni.request({
				url: `${that.$api.baseUrl}${that.$api.assessment}`,
				method: 'POST',
				timeout: 30000,
				data: {
					id: that.id,
					device_id: systemInfo.deviceId
				},
				header: {
					'authtoken': that.$auth.token(that.$api.assessment)
				},
				success(res) {
					if (res.data?.code == 1) {
						if (!score) {
							res?.data?.data?.answer?.forEach(it => {
								it.open = false;
								it.pickIndex = 0;
								it.fraction = Math.max(0, it.fraction);
								it.range = Array.from({
									length: (it.fraction + 1)
								}, (_, index) => {
									let score = (it.fraction - index)
									if (it.modified_score == score) {
									  it.pickIndex = index
									}
									return score
								})
							});
							that.lists = res?.data?.data?.answer;
							that.commentSort = res?.data?.data?.comment_sort;
							that.commentTab = res?.data?.data?.comment;
							that.videoUrl = res?.data?.data?.video;
							that.evaluateIdx = res?.data?.data?.evaluate - 1;
							that.comments = res?.data?.data?.general_comments;
							that.signType = res?.data?.data?.sign_type;
						}
						that.totalScore = res?.data?.data?.total_score;
					} else {
						uni.showToast({
							title: res.data?.msg || '获取评审失败',
							icon: 'none',
						});
					}
				},
				fail(err) {
					uni.showToast({
						title: '获取评审失败',
						icon: 'none',
					});
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #F8F8F8;
}
.hearing-wrap{
	.ksvideo{
		width: 100%;
		height: 420rpx;
		position: fixed;
	}
	.pjwrap{
		width: 100%;
		height: 100%;
		.pjitem{
			width: 100%;
			display: flex;
			flex-direction: row;
			padding: 0 30rpx;
			.arrow{
				width: 30rpx;
				height: 30rpx;
				margin-top: 16rpx;
			}
			.dafen{
				font-size: 28rpx;
				line-height: 36rpx;
				color: #333333;
				margin: 18rpx 30px 0 20rpx;
				flex: 1;
			}
			.pickerwrap{
				width: 140rpx;
				height: 60rpx;
				border: 2rpx solid #999999;
				border-radius: 6rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				p{
					font-size: 28rpx;
					line-height: 28rpx;
					color: #333333;
				}
				image{
					width: 14rpx;
					height: 7rpx;
					margin-left: 25rpx;
				}
			}
		}
		.answer{
			width: 100%;
			display: flex;
			flex-direction: row;
			padding: 0 30rpx 20rpx 80rpx;
			.stuans{
				font-size: 28rpx;
				line-height: 36rpx;
				color: #333333;
				margin: 18rpx 15rpx 0 0;
			}
			.panduan{
				font-size: 28rpx;
				line-height: 36rpx;
				color: #01A44B;
				margin: 18rpx 20rpx 0 0;
			}
		}
		.pdpic{
			width: 567rpx;
			height: auto;
			margin-left: 90rpx;
		}
		.choiceitem{
			display: flex;
			flex-direction: row;
			align-items: center;
			image{
				width: 40rpx;
				height: 40rpx;
				margin-left: 45rpx;
			}
			.itemtxt{
				display: flex;
				flex-direction: row;
				flex: 1;
			}
		}
		.fstitle{
			width: 100%;
			height: 90rpx;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 2rpx;
			.shuxian{
				width: 6rpx;
				height: 30rpx;
				background: linear-gradient(0deg, #615CED, #8286F2);
				border-radius: 3rpx;
				margin-left: 25rpx;
			}
			p{
				font-size: 30rpx;
				color: #333333;
				line-height: 30rpx;
				margin-left: 10rpx;
			}
		}
		.pytitle{
			width: 100%;
			height: 90rpx;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 20rpx;
			.shuxian{
				width: 6rpx;
				height: 30rpx;
				background: linear-gradient(0deg, #615CED, #8286F2);
				border-radius: 3rpx;
				margin-left: 25rpx;
			}
			p{
				font-size: 30rpx;
				color: #333333;
				line-height: 30rpx;
				margin-left: 10rpx;
			}
		}
		.pyneirong{
			width: 100%;
			background-color: #FFFFFF;
			margin-top: 2rpx;
			padding: 30rpx 0 30rpx 25rpx;
			display: flex;
			flex-direction: row;
			.nrleft{
				width: 310rpx;
				height: 330rpx;
				background: #F7F7F7;
				border-radius: 10rpx;
				padding: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				.textarea1{
					color: #333333;
					font-size: 22rpx;
					width: 100%;
					height: 230rpx;
				}
			}
			.nrright{
				width: 395rpx;
				height: 330rpx;
				margin-left: 10rpx;
				display: flex;
				flex-direction: column;
				.tablist{
					display: flex;
					flex-direction: row;
					.tabitem{
						height: 60rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						position: relative;
						margin: 0 7rpx 0 7rpx;
						p{
							font-size: 20rpx;
							color: #333333;
							line-height: 20rpx;
							padding: 0 10rpx 0 10rpx;
						}
						.xiahuaxian{
							width: 100%;
							height: 3rpx;
							background: #615CED;
							border-radius: 2rpx;
							position: absolute;
							bottom: 0;
						}
					}
				}
				.tabcontent{
					padding: 9rpx 12rpx 9rpx 12rpx;
					border: 2rpx solid #615CED;
					border-radius: 6rpx;
					font-size: 20rpx;
					color: #615CED;
					line-height: 26rpx;
					margin: 5rpx 20rpx 5rpx 10rpx;
				}
			}
		}
		.pyneirong1{
			width: 100%;
			background-color: #FFFFFF;
			margin-top: 2rpx;
			padding: 30rpx 25rpx 30rpx 25rpx;
			display: flex;
			flex-direction: row;
			.pysrk{
				width: 100%;
				height: 330rpx;
				background: #F7F7F7;
				border-radius: 10rpx;
				padding: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				.textarea1{
					color: #333333;
					font-size: 22rpx;
					width: 100%;
					height: 230rpx;
				}
			}
		}
		.zztitle{
			width: 100%;
			height: 90rpx;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 20rpx;
			.xiahuaxian{
				width: 6rpx;
				height: 30rpx;
				background: linear-gradient(0deg, #615CED, #8286F2);
				border-radius: 3rpx;
				margin-left: 25rpx;
			}
			p{
				font-size: 30rpx;
				color: #333333;
				line-height: 30rpx;
				margin-left: 10rpx;
			}
		}
		.pdpic1{
			width: 100%;
			background-color: #FFFFFF;
			margin-top: 2rpx;
			padding: 30rpx 25rpx 30rpx 25rpx;
			display: flex;
			flex-direction: row;
			image{
				flex: 1;
				height: auto;
				margin: 0 25rpx 0 25rpx;
			}
		}
		.tjbtn{
			width: 600rpx;
			height: 90rpx;
			background: linear-gradient(0deg, #615CED, #8286F2);
			border-radius: 45rpx;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 90rpx;
			text-align: center;
			margin: 100rpx 0 0 75rpx;
		}
	}
}
</style>
